<template>
  <div class="app-container">
    <!-- uploadExcelComponent 是大佬封装的真正的表格上传组件(带虚线)-->
    <upload-excel-component
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    />
    <!-- 展示读取的表格数据 -->
    <el-table
      :data="tableData"
      border
      highlight-current-row
      style="width: 100%;margin-top:20px;"
    >
      <el-table-column
        v-for="item of tableHeader"
        :key="item"
        :prop="item"
        :label="item"
      />
    </el-table>
  </div>
</template>

<script>
// 导入表格上传的组件
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { importEmployeeAPI } from '@/api'
import { formatExcelDate } from '@/utils'

export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [], // 保存表格的数据
      tableHeader: [] // 表格的头部数据
    }
  },
  methods: {
    // file->文件对象->size的单位是byte
    // 1byte(字节)计算机里保存一个字母/数字需要的二进制位的个数 (1byte=8bit)
    // 1kB=1024B(字节) 1MB=1024KB
    // 在上传excel文件后，做一个判断(小于1MB文件)
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true // 通过
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false // 不通过
    },
    // 接收UploadExcel组件内，读取头部表格成功的头部数据和表格体的数据
    async handleSuccess({ results, header }) {
      // result是数组套对象，每个对象对应一行数据
      // result是表格的所有数据(可以打印看一下result/header)
      // header里是第一行(作为列标题字符串数组)
      this.tableData = results
      this.tableHeader = header
      // 注意：我们不能直接把results发给后台
      // 原因：后台要求传递的数据数组里对象是英文的key
      // 解决：做一个后置处理，xlsx读中文的对象数据，拿到以后我们遍历做一个转换映射
      // 思路：遍历出每个对象，把值取出来，添加到一个英文的新的对象里
      // 1、准备一个中文和英文的映射关系(枚举对象)
      // 我们现在有的数据是中文的key，去这个对象取值，那得知道key名(所以中文在前)
      const userRelations = {
        入职日期: 'timeOfEntry',
        手机号: 'mobile',
        姓名: 'username',
        转正日期: 'correctionKeyTime',
        工号: 'workNumber',
        部门: 'departmentName',
        聘用形式: 'formOfEmployment'
      }
      // 2、遍历数组里面的每个对象
      // 遍历一次，产生一个英文key的新对象，想要收集成一个数组，把forEach->map
      const newArr = results.map(obj => {
        const newObj = {}
        // 3、拿到对象里所有key名(Object.keys(对象)->返回对象里所有Key字符串数组)
        const keyArr = Object.keys(obj) // ['入职日期'，'姓名' 。。。]
        // 4、遍历每个中文的key，换成对应英文字符串
        keyArr.forEach(zhKey => {
          const enKey = userRelations[zhKey] // 换成英文字符串的key
          // 5、为新对象添加英文key和对应的值
          // 只有时间对应的key符合条件，进入把值传给专门处理excel表格时间的方法
          if (enKey === 'correctionKeyTime' || enKey === 'timeOfEntry') {
            newObj[enKey] = formatExcelDate(obj[zhKey])
          } else {
            newObj[enKey] = obj[zhKey]
          }
        })
        // 新对象里上面的forEach遍历很多次，新对象有了很多对英文Key+value，再返回这个处理好的英文对象
        return newObj
      })
      //  console.log(newArr)
      const res = await importEmployeeAPI(newArr)
      // console.log(res)
      this.$message.success(res.message)
      this.$router.back()
    }
  }
}
</script>
